import styles from './header.module.scss'
import ThemeButton from "@/components/theme/ThemeButton.tsx";
import {Button, Breadcrumb, Dropdown, MenuProps, Avatar, Space} from "antd";
import {
    BellOutlined,
    ExpandOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    SettingOutlined,
    SearchOutlined
} from "@ant-design/icons";

interface IProps {
    collapsed?: boolean;
    changeCollapsed: () => void;
}

const items: MenuProps['items'] = [
    {
        key: '1',
        label: (
            <div style={{width: '200px'}}>
                <Space>
                    <Avatar size={36}
                            src="../src/assets/logo-v1.png"/>
                    ADMIN

                </Space>

            </div>
        ),
    },
    {
        key: '2',
        label: (
            <div>
                退出登录
            </div>
        )
    }
];

function Component(props: IProps) {
    const {collapsed, changeCollapsed} = props;

    const onClick = () => {
        changeCollapsed()
    }

    return (
        <div className={styles.container}>
            <div className={styles.headerBox}>
                <div className={styles.nav}>

                    <Button onClick={onClick}
                            type='text'
                            icon={collapsed ? <MenuFoldOutlined/> : <MenuUnfoldOutlined/>}
                            className={styles.btnIcon}>
                    </Button>
                    <Breadcrumb
                        separator=">"
                        items={[
                            {
                                title: 'Home',
                            },
                            {
                                title: 'Application Center',
                                href: '',
                            },
                            {
                                title: 'Application List',
                                href: '',
                            },
                            {
                                title: 'An Application',
                            },
                        ]}
                    />

                </div>
                <div className={styles.info}>
                    <Button icon={<SearchOutlined/>} type="text" iconPosition='end'>
                        Search
                    </Button>
                    <Button type='text' icon={<SettingOutlined/>} className={styles.btnIcon}/>
                    <ThemeButton/>
                    <div>语言</div>
                    <Button type='text' icon={<ExpandOutlined/>} className={styles.btnIcon}/>
                    <Button type='text' icon={<BellOutlined/>} className={styles.btnIcon}/>

                    <Dropdown menu={{items}}>
                        <Avatar size={36}
                                src='https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp'/>
                    </Dropdown>

                </div>

            </div>
            <div className={styles.broadBox}>面包屑区域</div>

        </div>
    );
}

export default Component;